<script setup lang="ts">
import { ref } from "vue";
import { useMenu } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import Delete from "@iconify-icons/ep/delete";
import EditPen from "@iconify-icons/ep/edit-pen";
import AddFill from "@iconify-icons/ri/add-circle-line";

defineOptions({
  name: "SystemMenu"
});

const formRef = ref();
const tableRef = ref();
const {
  form,
  loading,
  columns,
  dataList,
  onSearch,
  resetForm,
  openDialog,
  handleDelete,
  handleSelectionChange
} = useMenu();

function onFullscreen() {
  // 重置表格高度
  tableRef.value.setAdaptive();
}
const dialogDeleteVisible = ref(false);
const data = ref();
function openDeleteDialog(row: object) {
  dialogDeleteVisible.value = true;
  data.value = row;
}
function cancelDelete() {
  dialogDeleteVisible.value = false; // 关闭对话框
  data.value = null; // 清空数据
}
function confirmDelete() {
  handleDelete(data.value);
  dialogDeleteVisible.value = false; // 关闭对话框
  data.value = null; // 清空数据
}
</script>

<template>
  <div class="main">
    <div class="top">
      <div class="top-left">
        <el-form
          ref="formRef"
          :inline="true"
          :model="form"
          class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px] overflow-auto"
        >
          <el-form-item>
            <el-input
              v-model="form.menuName"
              placeholder="请输入菜单名称"
              clearable
              class="!w-[180px]"
              @keyup.enter="onSearch"
              @blur="onSearch"
              @change="onSearch"
            >
              <template #suffix>
                <el-icon class="el-input__icon" @click="onSearch">
                  <IconifyIconOffline icon="ri:search-line" />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="top-right">
        <el-button
          type="primary"
          :icon="useRenderIcon(AddFill)"
          @click="openDialog()"
        >
          新增菜单
        </el-button>
      </div>
    </div>

    <PureTableBar
      style="margin-top: 8px"
      :columns="columns"
      :isExpandAll="false"
      :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch"
      @fullscreen="onFullscreen"
    >
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          ref="tableRef"
          adaptive
          :adaptiveConfig="{ offsetBottom: 45 }"
          align-whole="center"
          row-key="id"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          :data="dataList"
          :columns="dynamicColumns"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @selection-change="handleSelectionChange"
        >
          <template #operation="{ row }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(EditPen)"
              @click="openDialog('修改', row)"
            >
              修改
            </el-button>
            <el-button
              v-show="row.menuType !== 3"
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(AddFill)"
              @click="openDialog('新增', { parentId: row.id } as any)"
            >
              新增
            </el-button>
            <el-button
              class="reset-margin"
              link
              type="primary"
              :size="size"
              :icon="useRenderIcon(Delete)"
              @click="openDeleteDialog(row)"
            >
              删除
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <el-dialog
      v-model="dialogDeleteVisible"
      width="480"
      title="操作提示"
      class="deletedialog"
      :close-on-click-modal="false"
    >
      <div class="top" style="margin-bottom: 26px">
        <span class="iconfont">&#xe63a;</span>
        <div class="a-content" style="align-content: center">
          <div class="c1">您确定要删除该菜单吗？</div>
        </div>
      </div>
      <div class="deletebtn">
        <el-button class="cancel" @click="cancelDelete">取消</el-button>
        <el-button type="primary" class="submit" @click="confirmDelete"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper::before) {
  height: 0;
}
.top {
  display: flex;
  width: 100%;
  background: #ffffff;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  .top-right {
    padding: 16px !important;
  }
}

.main-content {
  margin: 24px 24px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
// 删除
.deletedialog {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 0 !important;
  width: 480px !important;
  // height: 197px;
  margin: 0 !important;

  .el-dialog__body {
    padding: 26px;
    flex: 1;
    display: flex;
    flex-direction: column;

    .top {
      display: flex;
      // align-items: center;
      justify-content: flex-start;
      // flex: 1;

      .c1 {
        font-weight: 600;
        font-size: 18px;
        color: #1f2329;
      }

      .iconfont {
        font-size: 24px;
        color: #d73d3b;
        margin-top: 3px;
        margin-right: 10px;
      }
      .iconfont1 {
        font-size: 24px;
        color: #f1b34d;
        margin-top: 3px;
        margin-right: 10px;
      }
      .icon {
        font-size: 24px;
        color: #d73d3b;
        margin-top: 3px;
        margin-right: 10px;
      }
      .icon1 {
        font-size: 24px;
        color: #f1b34d;
        margin-top: 3px;
        margin-right: 10px;
      }

      .promptimg {
        width: 24px;
        height: 24px;
        margin-top: 3px;
      }
    }

    .deletebtn {
      height: 36px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      //margin-top: 26px;
    }
  }
}
</style>
